<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
    </style>
</head>
<body>
<div id="app">
    <el-page-header style="background-color: #3f3f3f; color: white;
    line-height: 60px;" @back="goBack">
    </el-page-header>
    <template>
        <div>
            <el-header>
                <!--        面包屑-->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <el-dropdown>
              <span class="el-dropdown-link">
                <b>学生信息管理</b
                ><i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                            <!--              下拉菜单-->
                            <el-dropdown-menu slot="dropdown" @click="insert()">
                                新增</el-dropdown-item
                                    >
                                <el-dropdown-item disabled>查询</el-dropdown-item>
                                <el-dropdown-item @click="update()">修改
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-breadcrumb-item>
                    <!--          面包屑当前页面-->
                    <el-breadcrumb-item><a>查询学生信息</a></el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>
            <el-main>
                <!--        表单-->
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="学生姓名:">
                        <el-input v-model="name" placeholder="请输入学生姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="学生Id:">
                        <el-input v-model="getId" placeholder="请输入学生id"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="selectStudent()">查询</el-button>
                    </el-form-item>
                    <p v-if="display">暂无数据</p>
                        <el-divider></el-divider>
                    </el-form-item>
                </el-form>
                <!--       表格 数据展示-->
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        姓名:
                    </template>
                    {{formInline.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-female"></i>
                        性别:
                    </template>
                    {{formInline.gender}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-watch-1"></i>
                        年龄:
                    </template>
                    {{formInline.age}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-watch-1"></i>
                        专业:
                    </template>
                    {{formInline.major}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号:
                    </template>
                    {{formInline.phoneNumber}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        身份证号码:
                    </template>
                    {{formInline.identityCrad}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-collection-tag"></i>
                        入学时间:
                    </template>
                    {{formInline.created}}
                </el-descriptions-item>
                </el-descriptions>
            </el-main>
        </div>
    </template>

</div>
</body>
<!--inport Axios Framework-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                getId:"",
                name:"",
                display: true,
                formInline: {
                    name: '',
                    age: '',
                    address: '',
                    phoneNumber: '',
                    major: '',
                    identityCard: '',
                    getId: '',
                    created: '',
                    gender: ''
                },
                currentPage: {
                    page: 1,
                    size: 10,
                    totalNum: 0,
                    totalPage: 0
                },
                loading: false,
                value: true,
                studentArr: []
            };
        },
        methods: {
            insert(){
              location.href="/"
            },
            update(){
              location.href="/"
            },
            selectStudent() {
                axios.get("/student/selectDetail?name=" + v.name + "&getId=" + v.getId).then(function (response) {
                    v.display = false;
                    v.formInline = response.data;
                })
            },
            goBack() {
                history.back();//返回上一页面
            },

        },

    })
</script>
</html>